<template>
  <div class="app-container">
    <div class="filter-wrapper">
      <NewPageFilter
        v-model:query="filterInfo.query.queryMap"
        :filter-list="filterInfo.searchList"
        :filter-btn="filterInfo.searchBtn"
        :list-type-info="listTypeInfo"
        :clear-type="clearType"
      >
      </NewPageFilter>
    </div>
    <div class="filter-wrapper">
      <NewPageFilter :filter-btn="filterInfo.btnList"> </NewPageFilter>
      <div class="display-flex"></div>
    </div>
    <table-container
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="tableInfo.api"
      :tab-index="false"
      :check-box="true"
      :query="filterInfo.query.queryMap"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      @handleEvent="handleEvent"
    >
    </table-container>

    <page-dialog
      v-if="dialogInfo.visible"
      :title="dialogInfo.title[dialogInfo.type]"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <!-- form -->
      <page-form
        class="paddingBox order-model-formBox flex_wrap_start_start"
        v-model:ref-obj="dialogFormInfo.ref"
        :data="dialogFormInfo.data"
        :list-type-info="listTypeInfo"
        :field-list="dialogFormInfo.fieldList"
        :rules="dialogFormInfo.rules"
        :label-width="dialogFormInfo.labelWidth"
      />
    </page-dialog>
  </div>
</template>
<script setup name="hisHitDepot">
import TableContainer from '@/components/TableContainer/index'
import PageForm from '@/components/PageForm'
import PageDialog from '@/components/PageDialog'
import {
  createHisHitDepot,
  deleteHisHitDepot,
  getHisHitDepot,
} from '@/api/base'
import { getDepotAll } from '@/api/core'
const { proxy } = getCurrentInstance()
const filterInfo = reactive({
  query: {
    sortString: '',
    groupMap: {},
    customizeUserVO: {},
    queryMap: {},
  },
  searchList: [],
  searchBtn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
  btnList: [
    {
      type: 'button',
      label: '新增',
      show: true, // true
      event: create,
    },
    {
      type: 'button',
      label: '删除',
      show: true, // true
      event: deleteDepot,
    },
  ],
})
const listTypeInfo = reactive({
  depotList: [],
})

const dialogInfo = reactive({
  title: {
    create: '新增黑名单',
    update: '修改黑名单',
  },
  visible: false,
  type: '',
  data: {},
  btLoading: false,
  btList: [
    { label: '关闭', event: closeDialog, show: true },
    {
      label: '保存',
      type: 'primary',
      event: saveDialog,
      saveLoading: false,
      show: true,
    },
  ],
})
const dialogFormInfo = reactive({
  ref: null,
  data: {},
  fieldList: [
    { label: '仓库', value: 'id', type: 'select', list: 'depotList' },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
  ],
  rules: {
    depot_id: [{ required: true, message: '请选择仓库', trigger: 'blur' }],
  },
  labelWidth: '120px',
})
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: undefined,
  selections: [],
  fieldList: [],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '删除',
        event: deleteDepot,
        show: true,
        popconfirmText: '删除后将改变数据,是否继续？',
      },
    ],
  },
})
const clearType = ref(true)

let obj = {
  id: {
    label: '仓库',
    value: 'id',
    componentType: 'select',
    list: 'depotList',
    event: search,
    hidden: true,
    show: true,
  },
  name: {
    label: '仓库',
    value: 'name',
    formatter: proxy.$fn.TripartiteMethod,
    type: 'text',
    event: search,
    hidden: false,
    show: false,
  },
  code: {
    label: '仓库编码',
    value: 'code',
    formatter: proxy.$fn.TripartiteMethod,
    type: 'text',
    event: search,
    hidden: false,
    show: false,
  },
  remark: {
    label: '备注',
    value: 'remark',
    formatter: proxy.$fn.TripartiteMethod,
    type: 'text',
    hidden: false,
    show: true,
  },
}
tableInfo.fieldList = Object.values({
  ...proxy.$fn.deepClone(obj),
})
filterInfo.searchList = Object.values({
  ...proxy.$fn.deepClone(obj),
})
getCustomize()

function getCustomize() {
  tableInfo.api = getHisHitDepot
  getList()
  getDepotList()
}
function getList() {
  tableInfo.refresh = Math.random()
}
function search() {
  tableInfo.initCurpage = Math.random()
  tableInfo.refresh = Math.random()
}
function clearSearch() {
  clearType.value = !clearType.value
  filterInfo.query.queryMap = proxy.$fn.deepClone(filterInfo.copyQueryMap)
  search()
}
function create() {
  dialogInfo.data = {}
  dialogInfo.type = 'create'
  dialogInfo.visible = true
}
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.selections = [...data]
      break
  }
}
function modifyCallback(reload) {
  proxy.modifyVisible = false
  if (reload) {
    tableInfo.refresh = Math.random()
  }
}
function getDepotList(params = {}) {
  getDepotAll(params).then((resp) => {
    if (resp && resp.success) {
      const data = resp.data
      for (let item of data) {
        listTypeInfo.depotList.push({
          key: item.name,
          value: item.id,
        })
      }
    }
  })
}
function closeDialog() {
  //关闭弹窗
  dialogInfo.visible = false
  dialogInfo.data = {}
}
function saveDialog() {
  dialogFormInfo.ref.validate((valid) => {
    if (valid) {
      const params = dialogFormInfo.data
      createHisHitDepot(params).then((res) => {
        if (res && res.success) {
          dialogInfo.visible = false
          tableInfo.refresh = Math.random()
          dialogFormInfo.data = {}
        }
      })
    }
  })
}
function deleteDepot(row = undefined) {
  const ids = []
  if (row) {
    ids.push(row.id)
  } else {
    ids.push(
      tableInfo.selections.map(function (row) {
        return row.id
      })
    )
  }
  deleteHisHitDepot(ids).then((res) => {
    if (res && res.success) {
      tableInfo.refresh = Math.random()
    }
  })
}
</script>

<style scoped></style>
